<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="container">
			<div class="top-ny">
				<div class="top-con clearfix">

					<div class="logo">
						<img src="img/logo.png" alt="">
					</div>

					<div class="top-con-middle">
						<ul>
							<li id="template4"><a  href="">网站首页</a></li>
						</ul>
					</div>
					<div class="top-con-right">
						<div class="tel">
							0535-60652189
						</div>
						<ul>
							<li><a href=""><img src="img/qq0.png" alt=""></a></li>
							<li><a href=""><img src="img/wb0.png" alt=""></a></li>
							<li><a href=""><img src="img/wx0.png" alt=""></a></li>
							<li><a href=""><img src="img/email0.png" alt=""></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="main-ny">
				<div class="main-ny-banner">
					<img src="img/banner-ny.jpg" alt="">
					<div class="bt-dh">
						<div class="bt-dh-con">
							<a href="">网站首页</a>&nbsp;&gt;&nbsp;<a href="">传悦观点</a>
						</div>
					</div>
				</div>
				<div class="main-ny-lb solution">
					<ul>
						<li id="template3">
							<div class="li-left">
								<span class="time1"></span>
								<span class="time2"></span>
							</div>
							<div class="li-right">
								<dl>
									<dt><a  href=""><img class="simg" src="" alt="图片未加载"></a></dt>
									<dd>
										<h2><a  href=""></a> </h2>
										<h3>
											标签：<span></span>
										</h3>
										<h4>
											<a  href=""></a>
										</h4>
										
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer-ny">
				<div class="footer-ny-con">
					<img class="logo-b" src="img/logo-b.png" alt="">
					<div class="footer-ny-con-right">
						<div class="dh-b"><a id="template5" href=""></a></div>
						<p>Copyright ©2013 创梦网络科技有限责任公司 ‖ 传悦 Chnyoo.cn All Rights Reserved 京ICP备12005221号 </p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	let ul = document.querySelector(".solution ul");
	let template3 = document.querySelector("#template3");
	let template4 = document.querySelector("#template4");
	let template5 = document.querySelector("#template5");
	let navUl = document.querySelector(".top-con-middle ul");
	let fnav = document.querySelector(".dh-b")
	let http = new XMLHttpRequest();
	http.open("get", "http://10.35.164.79:82/message");
	http.send();
	http.onreadystatechange = function() {
		if (http.readyState === 4) {
			let nav = JSON.parse(http.responseText);
			nav.forEach(function(item,index) {
				let newItem3 = template3.cloneNode(true);
				let newItem4 = template4.cloneNode(true);
				let newItem5 = template5.cloneNode(true);
				newItem3.setAttribute("data-id",`${item.id}`);
				newItem3.id = "";
				newItem4.id = "";
				newItem5.id = "";
				if (item.title !== null) {
					var t1 = item.date.slice(0, 7);
					var t2 = item.date.slice(8, 10);
					newItem3.querySelector(".time1").innerHTML = t1;
					newItem3.querySelector(".time2").innerHTML = t2;
					newItem3.querySelector("h2 a").innerHTML = item.title;
					newItem3.querySelector("h3 span").innerHTML = item.labels;
					newItem3.querySelector("h4 a").innerHTML = item.article;
					newItem3.querySelector(".simg").src = item.solutionimg;
					newItem3.querySelector("h4 a").href = `http://10.35.164.79/qyz/solution_cont.html?id=${item.id}`;
					newItem3.querySelector("h2 a").href = `http://10.35.164.79/qyz/solution_cont.html?id=${item.id}`;
					newItem3.querySelector("dt a").href = `http://10.35.164.79/qyz/solution_cont.html?id=${item.id}`;
					ul.appendChild(newItem3);
				}
				newItem4.querySelector("a").innerHTML = item.cn;
				newItem4.querySelector("a").href = `http://10.35.164.79/qyz/${item.link}`;
				if(index===1 || index===4){
					newItem4.querySelector("a").href = `javascript:;`;
				};
				newItem5.innerHTML = item.bnav;
				fnav.appendChild(newItem5);
				if(item.cn!==null){
					navUl.appendChild(newItem4);
				}
				if (index === 0) {
					newItem3.style.background = "url(img/new.png) no-repeat left top"
				}
			})
			console.log(nav)
		}
	}
</script>

